<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>友情购物车</title>
    <link rel="icon" href="img/京东-01.png">
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="css/clearBoth.css">
    <link rel="stylesheet" href="./css/mycar.css">
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .dibu {
            overflow: hidden;
            height: 85px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
            width: 100%;
            padding-top: 20px;
        }

        .top {
            width: 100%;
            height: 60px;
            background-color: #83cbac;
        }

        .top span {
            height: 60px;
            line-height: 60px;
            float: left;
            margin-left: 100px;
            font-size: 16px;
        }

        .top ul {
            float: right;
            width: 1000px;
            height: 60px;
            line-height: 60px;
        }

        .top li {
            float: left;
            width: 200px;
            height: 60px;
            text-align: center;
            font-size: 16px;
        }

        .top ul a {
            float: left;
            width: 200px;
            height: 60px;
        }

        .top ul li:hover a {
            background-color: #1a6840;
            color: white;
        }
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <div class="top">
        <span style="cursor: pointer;">京东</span>
        <ul>
            <li class="login">
                <a href="登录.html">登录</a>
            </li>
            <li class="register">
                <a href="注册.html">注册</a>
            </li>
            <li>
                <a href="我的订单.html">我的订单</a>
            </li>
            <li>
                <a href="我的京东.html">我的京东</a>
            </li>
            <li>
                <a href="list.html">商品列表</a>
            </li>
        </ul>
    </div>
    <!-- 搜索部分 -->
    <div class="carSearch">
        <div class="carSearch_c">
            <div class="carSearch_logo">
                <a href="首页.html"><img src="img/logo.png" alt=""></a>
            </div>
        </div>
    </div>
    <!-- 列表导航 -->
    <div class="list_nav">
        <div class="list_nav_c">
            <ul>
                <li><a href="首页.html">首页</a></li>
                <li>&gt;</li>
                <li><a href="list.html">列表</a></li>
                <li>&gt;</li>
                <li><a>当前</a></li>
            </ul>
        </div>
    </div>
    <!-- 购物车主体 -->
    <div class="content">
        <div class="content_c">
            <div class="content_top">
                <div class="content_top_left">
                    <b>全部商品</b>
                    <span>5</span>
                </div>
                <div class="content_top_right">
                    <div>
                        <b>配送至</b>
                    </div>
                    <div>
                        <span>请选择地址</span>
                        <svg class="icon arrorw" aria-hidden="true">
                            <use xlink:href="#icon-dingbu"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <!-- 购物车头部 -->
            <div class="car_head">
                <div class="car_head_check">
                    <input type="checkbox" class="checkAll">
                    <span>全选</span>
                </div>
                <div class="car_head_goods">商品</div>
                <div class="car_head_price">单价</div>
                <div class="car_head_num">数量</div>
                <div class="car_head_sum">小计</div>
                <div class="car_head_operate">操作</div>
            </div>
            <div class="cartcontent">
                <div class="car_body_list">
                    <div class="car_body">
                        <div class="car_body_row1">
                            <div>

                            </div>
                            <div>
                                <a href="javaScript:;">京东自营店</a>
                                <b><a></a></b>
                            </div>
                            <div>
                                <b></b>
                            </div>
                        </div>
                        <div class="car_body_row2">
                            <div>
                                <span class="mj">满减</span>
                                <span>已满5件，已减0.00元</span>
                                <a href="list.html">去凑单></a>
                            </div>
                            <div>
                                <p>¥<span>50</span></p>
                                <p class="jian">减：-¥<span>0.00</span></p>
                            </div>
                        </div>
                        <div class="car_body_row3">
                            <div class="car_body_checkbox" data-id="${item.goods_id}">
                                <input type="checkbox" class="checkOne" checked>
                            </div>
                            <div class="car_body_img">
                                <img src="img/logo.png" alt="">
                            </div>
                            <div class="car_body_goods">
                                <b></b>
                                <p><a>商品名称</a></p>
                            </div>
                            <div class="car_body_style"></div>
                            <div class="car_body_price">¥50</div>
                            <div class="car_body_num" data-stock="${item.goods_number}" data-id="${item.goods_id}">
                                <input type="button" value="-" class="reduce">
                                <input type="number" value="5" class="goodsNumber">
                                <input type="button" value="+" class="add">
                                <p>有货</p>
                            </div>
                            <div class="car_body_sum">¥500
                            </div>
                            <div class="car_body_operate">
                                <p>
                                    <a href="javaScript:;" class="del" name="del${i}" goodId="${item.goods_id}">删除</a>
                                    <a href=""></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="car_foot">
                <div class="car_foot_left">
                    <input type="checkbox" class="checkAll">全选
                    <span class="removeSelect">删除选中的商品</span>
                    <span class="clearBoth">清空购物车</span>
                </div>
                <div class="car_foot_right">
                    <div>
                        <p>已选择<span class="numSum">5</span>件商品</p>
                        <p class="promotion">促销：¥<span>0.00</span></p>
                    </div>
                    <div>总价：<b class="priceSum">¥<span>50</span></b></div>
                    <div><a href="javaScript:;">去结算</a></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->

    <div class="dibu">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
    </div>
</body>
<script>
    var span = document.querySelector('.top span')
    span.onclick = function () {
        location.href = '首页.html'
    }
    function getCookie(key) {
        var cookie = document.cookie;
        var arr = cookie.split('; ')
        for (var i = 0; i < arr.length; i++) {
            var brr = arr[i].split('=')
            if (brr[0] === key) {
                return brr[1]
            }
        }
    }
    var username = getCookie('username')
    console.log(username);

    // var sex = getCookie('sex')
    // console.log(sex);

    function setCookie(key, value, seconds) {
        var date = new Date()
        date.setTime(date.getTime() + seconds * 1000 - 8 * 3600 * 1000)
        document.cookie = key + '=' + value + ';expires=' + date
    }
    // 将cookie中的用户名显示在页面上
    if (username) {
        // 显示在页面上
        var loginLi = document.querySelector('.login');
        loginLi.innerHTML = `
    <a href="">欢迎尊贵的${username}</a>
    `

        var registerLi = document.querySelector('.register');
        registerLi.innerHTML = `
        <a href="javascript:;" class="logout">登出</a>
    `

        // 登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
            <a href="登录.html">登录</a>
        `
            registerLi.innerHTML = `
            <a href="注册.html">注册</a>
        `

            // 删除cookie - 重新设置cookie - 将失效的时间日期对象设置在上一秒
            setCookie('username', null, -1)
        }
    }
</script>
<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/layer/dist/layer.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/cart.js"></script>

</html>